import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { NavBar, Icon, Toast } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

import { getUserId } from '../../../utils/utils'

// widget
import ProductionInfo from './ProductionInfo'
import ProductionAttr from './ProductionAttr'
import ProductionFooter from './ProductionFooter'
import ProductionDetail from './ProductionDetail'

class ProductionBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	stepValue: 1,
        	spec: {}
        }
    }
    onGoodsNumberChange(value) {
    	this.setState({
    		stepValue: value
    	})
    }
    onAddCart() {
    	const { meyley, dispatch } = this.props

    	const specTag = this.getSpecTag()
    	if(!meyley.productionDetail){
    		return false
    	}

    	if(meyley.productionDetail && specTag.length !== meyley.productionDetail.goodsAttr.length) {
    		Toast.info('属性未选全!', 1)
    		return false
    	}
        let param = {
            userId: getUserId(),
            brandId: meyley.productionDetail && meyley.productionDetail.brandId,
            goodsId: meyley.productionDetail && meyley.productionDetail.goodsId,
            goodsNumber: this.state.stepValue
        }
        if(specTag.length) {
            param.spec = specTag.join(',')
        }
    	dispatch({
    		type: 'goods/addCart',
    		payload: param
    	})
    }
    onAttrTagChange(attrValue, goodsAttrId, selected) {
    	if(selected) {
    		this.state.spec[attrValue] = goodsAttrId
    	} else {
    		delete this.state.spec[attrValue]
    	}
    }
    /**
     *	get attr id
     * @return []
     */
    getSpecTag() {
    	let attrArr = []
    	for(let i in this.state.spec) {
    		attrArr.push(this.state.spec[i])
    	}
    	return attrArr
    }
	render() {
		const { meyley } = this.props
	 	return (
	 		<div className={styles['production-body']}>
	 			<ProductionInfo {...this.props} />
	 			<ProductionAttr 
	 				onGoodsNumberChange={this.onGoodsNumberChange} 
	 				onAttrTagChange={this.onAttrTagChange}
	 				{...this.props} />
	 			<ProductionDetail {...this.props} />
	 			<ProductionFooter onAddCart={this.onAddCart} {...this.props} />
	 		</div>
	  	);
	}
};

ProductionBody.propTypes = {
};

export default ProductionBody
